<template>
  <div class="task-card" shadow="hover">
    <el-row class="task-card-main" type="flex" justify="space-between">
      <el-row type="flex">
        <el-row class="task-card-content" type="flex">
          <h2 class="task-card-title">
            <el-tooltip class="item" effect="dark" :content="getCardNameLabel(eventCard)" :disabled="!isCardNameOverflow" placement="top">
              <p :class="['task-card-name', eventCard.enabled == 0 && 'task-card-enabled']" ref="parentNameWidth">
                <span ref="childNameWidth">{{ getCardNameLabel(eventCard) }}</span>
              </p>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" :content="$t('event.setting.serviceEventTypeSetting.flow.component.cardItem.tips1')" placement="top">
              <span class="task-card-disable" v-if="eventCard.enabled == 0">{{$t('common.base.disabled')}}</span>
            </el-tooltip>
            <ConnectorTag :card="eventCard">
            </ConnectorTag>
          </h2>
          <el-row class="task-card-others">
            <p>
              {{$t('event.setting.serviceEventTypeSetting.flow.component.cardItem.label1')}}：
              <span v-if=" (eventCard.notNullFlow && eventCard.notNullFlow.length) || (eventCard.stateCanEdit && eventCard.stateCanEdit.length > 0)">{{$t('common.base.haveSet')}}</span>
              <span v-else>{{$t('common.base.notSet')}} </span>
              <i class="iconfont icon-bianji1 pointer" @click="$emit('showEditRule', eventCard)"></i>
            </p>
            <p @click="$emit('showEditPremiss', eventCard)">
              {{$t('event.setting.serviceEventTypeSetting.flow.component.cardItem.label2')}}：
              <span class="pointer see-role">{{$t('event.setting.serviceEventTypeSetting.flow.component.cardItem.des1')}}</span>
              <i class="iconfont icon-bianji1 pointer"></i>
            </p>
            <p>
              {{$t('event.setting.serviceEventTypeSetting.flow.component.cardItem.label3')}}：
              <span v-if="eventCard.inputType == 'single'">{{$t('common.base.onceTime')}}</span>
              <span v-else-if="eventCard.inputType == 'multiple'">{{$t('common.base.moreTime')}}</span>
            </p>
          </el-row>
        </el-row>
      </el-row>
      <i class="iconfont icon-tuozhuaipaixu drag-icon"></i>
    </el-row>
    <el-row class="task-card-opearte" type="flex">
      
      <!-- 连接器附加组件有编辑和重命名 没有预览 -->
      <template v-if="isConnectorCard(eventCard)">
        <div class="connector-list-view-card-item-footer-left">
          <el-dropdown placement="top">
            <i class="icon-diandiandian iconfont">{{t('common.base.moreOperator')}}</i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <div @click="editCardName">
                  <i class="iconfont icon-edit-square"></i>
                  {{t('common.base.rename')}}
                </div>
              </el-dropdown-item>
              <el-dropdown-item>
                <div @click="handleDeleteCard">
                  <i class="iconfont icon-delete"></i>
                  {{$t('common.base.delete')}}
                </div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="task-card-opearte-del" @click="editCard">
        <i class="iconfont icon-edit-square">{{$t('common.base.edit')}}</i>
      </div>
      </template>
      <template v-else>
        <div class="task-card-opearte-del" @click="handleDeleteCard">
          <i class="iconfont icon-delete">{{$t('common.base.delete')}}</i>
        </div>
        <div class="task-card-opearte-modify" @click="$emit('showPreview', eventCard)">
          <i class="iconfont icon-eye-fill">{{$t('common.base.preview')}}</i>
        </div>
      </template>
      
    </el-row>

    <!-- 编辑连接器名称 -->
    <ConnectorListViewCreateDialog
        :title="$t('common.connector.editConnector')"
        :value="formValue"
        :visible="isShowEditConnectorNameModal"
        :fields="CreateConnectorModalFields"
        :is-connector="true"
        isShowSelectLanguage
        @close="onDialogCloseHandler"
        @confirm="onDialogConfirmHandler"
        @input="onDialogUpdateHandler"
    >
    </ConnectorListViewCreateDialog>
  </div>
</template>

<script>
/* service */
import { isConnectorCard } from '@service/CardService';
import { getConnectorName, updateConnectorName } from '@src/modules/connector/api';
import { ConnectorListViewCreateDialog } from '@src/modules/connector/view/list/components';
import { message } from '@src/util/message'
import { t } from '@src/locales'
import { CardNameLabelEnum } from '@model/enum/LabelEnum'
import ConnectorTag from '@src/modules/setting/components/connectorTag/index.vue';

const CreateConnectorModalFields = [
  {
    fieldName: 'name',
    formType: 'text',
    displayName: t('common.base.name'),
    placeHolder: t('common.placeholder.inputName'),
    isNull: 0,
    maxlength: 20
  },
  {
    fieldName: 'description',
    formType: 'textarea',
    displayName: t('common.base.explain'),
    placeHolder: t('common.connector.fields.description.placeholder1'),
    isNull: 1,
    maxlength: 500
  }
]
export default {
  name: 'event-card-item',
  props: {
    eventCard: {
      type: Object,
      default: () => ({}),
    },
    index: {
      type: Number   
    },
  },
  computed: {
    connectorInfo() {
      let res = {}
      try {
        const config = this.eventCard?.config
        if(config) {
          res = JSON.parse(config) || {}
          return res.connectorInfo || {}
        }
      } catch (error) {
        console.warn('connectorInfo', error)
      }
      return res
    }
  },
  components: {
    ConnectorListViewCreateDialog,
    ConnectorTag,
  },
  data() {
    return {
      isCardNameOverflow: false,
      isShowEditConnectorNameModal: false,
      CreateConnectorModalFields,
      formValue: {},
    };
  },
  mounted() {
    this.initOverflow();
  },
  methods: {
    getCardNameLabel(item) {
      const { name, cardNameLanguage } = item
      const locale = this.$i18n.locale
      return cardNameLanguage?.locale || CardNameLabelEnum[name] || name
    },
    async editCardName() {
      try {
        const res = await getConnectorName(this.connectorInfo)
        if(res.status == 0){ 
          const { data = {} } = res
          this.isShowEditConnectorNameModal = true
          this.formValue.id = data.id
          this.formValue.name = data.connectorName || ''
          this.formValue.description = data.connectorRemarks || ''
          this.formValue.titleLanguage = data.titleLanguage || {}
          this.formValue.descLanguage = data.descLanguage || {}
        } else {
          message.error(res.message)
        }
      } catch(error) {
        console.log(error)
      }
    },
    resetFormValue(){
      this.formValue = {
        id: '',
        name:'',
        description:'',
        titleLanguage: {},
        descLanguage: {},
      }
    },
    onDialogCloseHandler(){
      this.isShowEditConnectorNameModal = false
      this.resetFormValue()
    },
    onDialogConfirmHandler(){
      const params = {
        id: this.formValue.id,
        connectorName: this.formValue.name,
        connectorRemarks: this.formValue.description,
        titleLanguage: this.formValue.titleLanguage,
        descLanguage: this.formValue.descLanguage
      }
      updateConnectorName(params).then(res=>{
        if(res.status == 0){
          this.$emit('update')
          message.success(this.$t('common.base.tip.modifySuccess'))
          this.onDialogCloseHandler()
        }else{
          message.error(res.message)
        }
      })
    },
    onDialogUpdateHandler(info) {
      let { fieldName,newValue } = info
      if( !fieldName )return;
      this.formValue[fieldName] = newValue
    },
    isConnectorCard,
    // 删除组件
    handleDeleteCard() {
      this.$confirm(this.$t('common.base.tip.areYouWantDeleteIt', {data1:this.eventCard.name}), this.$t('common.base.toast'), {
        confirmButtonText: this.$t('common.base.confirm'),
        cancelButtonText: this.$t('common.base.cancel'),
        type: 'warning',
      }).then(() => {
        this.$emit('deleteCard', this.index);
      });
    },
    // 初始化溢出tips
    initOverflow() {
      this.$nextTick(() => {
        this.isCardNameOverflow = this.$refs?.parentNameWidth?.offsetWidth < this.$refs?.childNameWidth?.offsetWidth;
      });
    },
    // 编辑连接器附加组件
    editCard() {
      this.$emit('edit', this.eventCard)
    },
  },
};
</script>

<style lang="scss" scoped>
.task-card {
  cursor: move;
  width: 358px;
  height: 159px;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.04);
  &:hover {
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.12);
  }

  .task-card-main {
    height: calc(100% - 32px);
    padding: 16px 20px;
    .drag-icon {
      font-size: $font-size-small;
      display: none;
    }

    .task-card-content {
      flex-direction: column;
      justify-content: space-between;
      
      .task-card-title {
        display: flex;
        justify-content: flex-start;

        .task-card-name {
          max-width: 230px;
          line-height: 22px;
          margin: 0 12px 0 0;
          font-size: $font-size-large;
          @include text-ellipsis;
          word-break: break-all;
        }
        
        .setting-card-connector-tag-container {
          padding-left: 0;
        }

        .task-card-enabled {
          max-width: 200px;
        }

        .task-card-disable {
          width: 54px;
          height: 22px;
          line-height: 22px;
          font-size: $font-size-small;
          font-weight: 500;
          text-align: center;
          color: #999999;
          background: rgba(153, 153, 153, 0.2);
          border: 1px solid rgba(191, 191, 191, 0.2);
          border-radius: 12px;
        }
      }

      .task-card-others {
        i {
          font-size: $font-size-small;
          color: $text-color-regular;
          &:hover {
            color: $color-primary;
          }
        }

        p {
          margin-bottom: 4px;
          font-size: $font-size-small;
          color: $text-color-regular;

          span {
            color: $text-color-primary;
            margin-right: 8px;
          }

          &:last-child {
            margin-bottom: 0;
          }

          .see-role {
            color: $color-primary;
          }
        }
      }
    }
  }
  .task-card-opearte {
    height: 32px;
    line-height: 32px;
    border-top: 1px solid $bg-color-l1;

    & > div {
      cursor: pointer;
      flex: 1;
      text-align: center;
      color: #999999;
      i {
        font-size: $font-size-small;
        &::before {
          margin-right: 8px;
        }
      }
    }

    .task-card-opearte-del {
      border-right: 1px solid $bg-color-l1;
      &:hover {
        color: $color-danger;
      }
    }

    .task-card-opearte-modify {
      &:hover {
        color: $color-primary;
      }
    }
  }

  &:hover {
    .drag-icon {
      display: block;
    }
  }
}

@media screen and (max-width: 1920px) {
  .task-card-item {
    width: calc(25% - 12px);
  }
}
@media screen and (max-width: 1680px) {
  .task-card-item {
    width: calc(33.3% - 12px);
  }
}
@media screen and (max-width: 1440px) {
  .task-card-item {
    width: 328px;
  }
}
</style>
